<template>
  <!-- 头部 -->
  <van-nav-bar title="我的优惠券" left-arrow @click-left="goMy" />

  <!-- 使用 -->
  <div class="myUse">
    <van-tabs title-active-color="rgb(173,57,55)" line-width="30%" @click-tab="onClickTab">
      <van-tab v-for="item in userList" :key="item.id" :title="item.title">
      </van-tab>
      <!-- 兑换 -->
      <div class="coin">
        <input class="input" placeholder="请输入优惠码" v-model="code" />
        <button class="btnCoin" @click="clickCoin">兑换</button>
        <p class="myFont">使用说明</p>
      </div>
      <div class="myBgc" v-for="(item, index) in couponlist" :key="index" @click="select(item)" v-show="item.endTime > 0">
        <div class="money">
          <p class="moneyOne">{{ item.tag }}</p>
          <p class="moneyTwo">{{ item.discount }}元</p>
          <p class="moneyThree">满{{ item.min }}元使用</p>
        </div>
        <div class="content">
          <p class="contentOne">{{ item.name }}</p>
          <p class="contentTwo">
            {{ item.desc }}
            <br />
            有效期: {{ item.endTime > 0 ? item.endTime + "天" : "已过期" }}
          </p>
        </div>
      </div>
    </van-tabs>
  </div>
</template>

<script>
import { showToast } from "vant";
import { service } from "../api/config";
import { fetchData } from "../api/request.js";
const paramss = { // 请求参数
  type: 0,
  status: 0,
  page: 1,
  limit: 10
};
export default {
  name: "coupon",
  data() {
    return {
      userList: [
        {
          title: "未使用",
        },
        {
          title: "已使用",
        },
        {
          title: "已过期",
        },
      ],
      couponlist: [],
      lists: [],
      code: null,
    };
  },
  mounted() {
    fetchData(0, 1, this.$store.state.total).then(res => {
      this.couponlist = res
    });
  },
  methods: {
    onClickTab(title) {
      fetchData(title.name, 1, this.$store.state.total).then(res => {
        this.couponlist = res
      });
    },
    goMy() {
      //返回上一级
      if (this.$store.state.states == 0) {
        this.$router.push("/my");
      } else {
        this.$router.go(-1)
      }

    },
    clickCoin() {
      service.post("/wx/coupon/exchange", JSON.stringify({ code: this.code })).then(res => {
        showToast(res.data.errmsg);
      });

    },
    select(value) {
      if (this.$store.state.states == 1 && paramss.status == 0) {
        this.$store.state.coupon = value;
        // console.log(value);
        this.$router.go(-1);
      }

    }
  },
};
</script>

<style scoped>
html {
  font-size: 0.2666vw;
}

.active {
  color: red;
}

.coin {
  background-color: rgb(244, 244, 244);
}

.input {
  width: 75%;
  font-size: 15rem;
  height: 20rem;
  margin: 10rem;
  padding-left: 20rem;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(244, 244, 244);
}

.btnCoin {
  height: 25rem;
  width: 50rem;
  font-size: 15rem;
  color: rgb(238, 232, 231);
  background-color: rgb(177, 38, 43);
  border: none;
}

.myBgc {
  background-color: rgb(211, 172, 108);
  margin-left: 1.5%;
  margin-right: 1.5%;
  margin-top: 10rem;
}

.money {
  width: 30%;
  height: 70rem;
  display: inline-block;
  padding-left: 5%;
}

.content {
  width: 60%;
  height: 110rem;
  color: white;
  display: inline-block;
  padding-left: 2%;
}

.contentOne {
  font-size: 20rem;
}

.contentTwo {
  margin-top: -17rem;
  padding-top: 10rem;
  font-size: 10rem;
}

.common {
  display: inline-block;
  width: 95%;
}

.common {
  padding-left: 5%;
}

.moneyOne {
  border: 0.1rem solid rgb(164, 128, 67);
  width: 80rem;
  text-align: center;
  background-color: rgb(164, 128, 67);
  color: white;
  margin-left: -10rem;
  margin-bottom: 15rem;
}

.moneyTwo {
  color: rgb(168, 57, 37);
  font-size: 25rem;
}

.moneyThree {
  color: white;
  margin-top: -15rem;
  font-size: 15rem;
}

.common {
  background-color: rgb(194, 157, 100);
  font-size: 8rem;
  color: white;
}

.myFont {
  color: darkgrey;
  padding-left: 86%;
  font-size: 0.8rem;
}
</style>